<template>
  <n-modal
    :mask-closable="false"
    :closable="false"
    :close-on-esc="false"
    preset="card"
    title="新增"
    style="width: 1000px"
  >
    <n-form
      label-width="80"
      ref="insertFormRef"
      label-placement="left"
      label-align="left"
      :model="insertForm"
      require-mark-placement="left"
      :rules="Rules"
    >
      <n-grid :cols="24" x-gap="12" y-gap="8">
        <n-gi :span="6">
          <n-form-item label="部门编号：" path="departmentNo" label-width="80">
            <n-input
              v-model:value="insertForm.departmentNo"
              placeholder="请输入部门编号"
            >
            </n-input>
          </n-form-item>
        </n-gi>
        <n-gi :span="6">
          <n-form-item
            label="部门名称："
            path="departmentName"
            label-width="80"
          >
            <n-input
              v-model:value="insertForm.departmentName"
              placeholder="请输入部门名称"
            >
            </n-input>
          </n-form-item>
        </n-gi>
      </n-grid>
    </n-form>

    <template #footer>
      <div style="margin: 0 auto; width: 200px">
        <n-button class="footer-btn" type="primary" @click="confirm()"
          >确认</n-button
        >
        <n-button class="footer-btn" @click="cancel()"> 取消 </n-button>
      </div>
    </template>
  </n-modal>
</template>

<script lang="ts" setup>
import {
  Department,
  useDepartmentStore,
} from "@/store/modules/data-dictionary/department";
import { insertDepartment } from "@/api/data-dictionary/department";

const insertForm = ref({} as Department);
const insertFormRef = ref();

const departmentStore = useDepartmentStore();

//确认按钮
const confirm = () => {
  insertFormRef.value.validate((error: boolean) => {
    if (!error) {
      insertDepartment(insertForm.value).then(() => {
        insertForm.value = {} as Department;
        departmentStore.setDepartmentList({});
        departmentStore.closeDepartmentInsertDialog();
      });
    }
  });
};

//取消按钮
const cancel = () => {
  departmentStore.closeDepartmentInsertDialog();
  insertForm.value = {} as Department;
};

//校验
const Rules = {
  departmentNo: {
    required: true,
    message: "请输入部门编号",
    trigger: "blur",
  },
  departmentName: {
    required: true,
    message: "请输入部门名称",
    trigger: "blur",
  },
};
</script>

<style scoped></style>
